<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font_2800081_ze7jqbfe27f/iconfont.css">
    <!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css"> -->
    <style>
        div {
            color: #000;
        }

        /* 鼠标悬停时的状态 */
        /* div:hover {
            color: red;
            font-size: 30px;
            font-weight: bold;
            background: blue;
            text-indent: 30px;
        } */

        /* 鼠标点击触发 */
        div:active {
            color: red;
            font-size: 30px;
        }

        /* 获取焦点 */
        input:focus {
            border: 5px solid red;
        }

        /* 图标字体 */
        .icon-loudou {
            font-size: 30px;
        }

        .icon-loudou:hover {
            font-size: 50px;
            color: red;
        }
    </style>
</head>
<body>
    <div>设置</div>

    <input type="text">

    <div class="iconfont icon-loudou"></div>
    <div class="iconfont icon-auto"></div>
    <div class="iconfont icon-bussiness-man"></div>
    <div class="iconfont icon-rising"></div>
    <div class="iconfont icon-favorites-fill"></div>
</body>
</html>